<!--
 * @Author: zhudunfeng 2101580047@qq.com
 * @Date: 2025-07-25 23:34:45
 * @LastEditors: zhudunfeng 2101580047@qq.com
 * @LastEditTime: 2025-08-02 21:40:50
 * @FilePath: \jptt-front\src\views\FilmView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import FilmItemList from '@/components/FilmItemList.vue'
import { getFilmList } from '@/api/films-api'
import type { Film } from '@/types/types'

const films = ref<Film[]>([])
const loading = ref(true)

onMounted(async () => {
  try {
    const result = await getFilmList()
    films.value = result.data
  } catch (error) {
    console.error('获取电影列表失败:', error)
    films.value = [
      { id: '1', title: '热门剧集标题示例', coverUrl: 'https://picsum.photos/320/480?random=1', duration: 3600, latestEpisode: 12, updateStatus: true, views: 125000 },
      { id: '2', title: '这是一个非常长的剧集标题用来测试文本截断效果', coverUrl: 'https://picsum.photos/320/480?random=2', duration: 2400, latestEpisode: 8, updateStatus: false, views: 89000 },
      { id: '3', title: '热门综艺精选', coverUrl: 'https://picsum.photos/320/480?random=3', duration: 1800, latestEpisode: 5, updateStatus: true, views: 320000 },
      { id: '4', title: '经典动漫回顾', coverUrl: 'https://picsum.photos/320/480?random=4', duration: 3000, latestEpisode: 24, updateStatus: false, views: 560000 },
      { id: '5', title: '最新纪录片', coverUrl: 'https://picsum.photos/320/480?random=5', duration: 4200, latestEpisode: 3, updateStatus: true, views: 98000 },
      { id: '6', title: '独家原创剧集', coverUrl: 'https://picsum.photos/320/480?random=6', duration: 2700, latestEpisode: 15, updateStatus: true, views: 180000 },
      { id: '7', title: '高分悬疑剧集', coverUrl: 'https://picsum.photos/320/480?random=7', duration: 3300, latestEpisode: 10, updateStatus: true, views: 240000 },
      { id: '8', title: '爱情故事精选', coverUrl: 'https://picsum.photos/320/480?random=8', duration: 2100, latestEpisode: 16, updateStatus: false, views: 156000 },
      { id: '9', title: '最新综艺精选', coverUrl: 'https://picsum.photos/320/480?random=9', duration: 2400, latestEpisode: 12, updateStatus: true, views: 210000 },
      { id: '10', title: '最新动漫精选', coverUrl: 'https://picsum.photos/320/480?random=10', duration: 2700, latestEpisode: 18, updateStatus: false, views: 300000 },
      { id: '11', title: '最新纪录片', coverUrl: 'https://picsum.photos/320/480?random=11', duration: 4500, latestEpisode: 4, updateStatus: true, views: 120000 },
      { id: '12', title: '最新电视剧', coverUrl: 'https://picsum.photos/320/480?random=12', duration: 3000, latestEpisode: 10, updateStatus: false, views: 250000 },
    ]
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <div class="film-view">
    <el-card class="film-container">
      <template #header>
        <div class="card-header">
          <h1>电影列表</h1>
        </div>
      </template>
      <el-skeleton :loading="loading" animated :rows="3">
        <template #default>
          <FilmItemList :films="films" />
        </template>
      </el-skeleton>
    </el-card>
  </div>
</template>

<style scoped>
.film-view {
  padding: 20px;
}

.film-container {
  background-color: var(--el-bg-color);
  border-radius: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h1 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--el-text-color-primary);
}
</style>